// font family
$fontFamily: Roboto, system-ui, -apple-system, BlinkMacSystemFont, segoe ui,
  Helvetica, Arial, sans-serif, apple color emoji, segoe ui emoji,
  segoe ui symbol;

@mixin border-1px($type: all, $style: solid, $color: $border2, $radius: 8px) {
  position: relative;

  &:after {
    content: "";
    pointer-events: none;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    transform-origin: 0 0;
    border-radius: $radius;
    box-sizing: border-box;
    width: 100%;
    height: 100%;

    @if $type==top {
      border-top: 1Px $style $color;
    } @else if $type==bottom {
      border-bottom: 1Px $style $color;
    } @else if $type==left {
      border-left: 1Px $style $color;
    } @else if $type==right {
      border-right: 1Px $style $color;
    } @else if $type==all {
      border: 1Px $style $color;
    }

    @media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
      width: 200%;
      height: 200%;
      border-radius: $radius * 2;
      transform: scale(0.5);
    }

    @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
      width: 300%;
      height: 300%;
      border-radius: $radius * 3;
      transform: scale(0.33333333);
    }
  }
}
